<template>
  <div class="right-table-2">
    <dv-border-box-6 class="box">
      <div class="table-name">
        <img src="./img/icon2.png" />Heated User Rank
      </div>
      <dv-scroll-board :config="config" />
    </dv-border-box-6>
  </div>
</template>

<script>
export default {
  name: "RightTable2",
  data() {
    return {
      config: {
        data: [],
        header: ["Name", "Number of tweets"],
        columnWidth: [50, 80],
        align: ["center"],
        oddRowBGC: "rgba(9, 37, 50, 0.4)",
        evenRowBGC: "rgba(10, 32, 50, 0.3)",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let mydata = this;
      mydata
        .$axios({
          method: "get",
          url: "http://116.62.228.138:10003/media/twitterUserGet",
        })
        .then((res) => {
          let arrlistresult = [];
          res.data.data.map((item) => {
            let arrlist = [item.username, `Number of Tweets: ${item.count}`];
            arrlistresult.push(arrlist);
          });
          this.config = {
            header: ["Name", "Number of tweets"],
            index: true,
            columnWidth: [60, 80],
            align: ["center"],
            oddRowBGC: "rgba(9, 37, 50, 0.4)",
            evenRowBGC: "rgba(10, 32, 50, 0.3)",
            data: arrlistresult,
          };
        });
    },
  },
};
</script>

<style lang="less">
.right-table-2 {
  width: calc(~"50% + 10px");
  height: 100%;
  margin: 0 -5px;

  .border-box-content {
    padding: 20px;
    box-sizing: border-box;
  }

  .table-name {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;

    img {
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }
  }
  .box {
    width: calc(~"100% - 20px");
  }
  .dv-scroll-board {
    height: calc(~"100% - 60px");
  }
}
</style>
